<template>
  <div v-loading="noticeList.loading">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/user-center' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user-center/user-notice' }">通知中心</el-breadcrumb-item>
      <el-breadcrumb-item>{{noticeList.data.title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="notice-article">
      <div class="clear-fix">
        <h2>{{noticeList.data.title}}</h2>
        <div class="axticle-time"><span class="el-icon-user">:&nbsp;管理员</span><span>时间:&nbsp;{{ noticeList.data.create_time }}</span></div>
        <div v-html="noticeList.data.content" class="content"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive,onMounted } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
import { noticesApi } from '@/axios/userRequest'
const router = useRouter()
const route = useRoute()

let noticeList = reactive({
  data:{},
  loading:true
})

onBeforeRouteLeave((to, from)=>{
  localStorage.removeItem('noticeData')
})

const props = defineProps({
  nowNotice:Object
})

onMounted(()=>{
  init()
})

let init = async()=>{
  try {
    let {data:res,code,msg} = await noticesApi({id:route.params.id})
    if(code != 1) return proxy.$message.error(msg)
    noticeList.loading = false
    noticeList.data = JSON.parse(JSON.stringify(res))
  }catch (e) {
    console.log(e)
  }
}


let noticeData = reactive({})
if(route.params.id && route.params.id === JSON.parse(localStorage.getItem('noticeData')).id.toString()){
  let test = reactive({})
  noticeData = reactive(props.nowNotice !== test ? JSON.parse(localStorage.getItem('noticeData')) : props.nowNotice)
}else{
  router.push('/user-center/user-notice')
}
</script>

<style lang="less" scoped>
.notice-article{
  margin-top: 12px;

  .clear-fix{
    &:deep(.content){
      box-sizing: border-box;
      margin: 40px 10px 10px;
      border: 1px solid #DCDFE6;
      padding: 20px;
      border-radius: 10px;
      p{
        font-size: 14px;
        color:@secondary;
      }
    }
    h2{
      text-align: center;
      color: @subtitle;
    }
    div:nth-child(2){
      text-align: center;
      margin-bottom: 10px;
    }


    .axticle-time{
      font-size: 14px;
      span:nth-child(1){
        color: #78797f;
        margin-right: 15px;
      }
      span:nth-child(2){
        color: #78797f;
      }
    }
  }
  &:deep(.el-card__body){
    table{
      border: 1px solid #E1E6EB;
      tbody{
        tr{
          th,td{
            height: 32px;
            text-align: center;
            font-size: 14px;
          }
          th{
            background-color: #F5F6FA;
            color: #999;
            font-weight: normal;
          }
          td{
            color: #333;
          }
        }
        &:not(&:nth-of-type(1)){
          border-top: 1px solid #E1E6EB;
        }
      }
    }
  }
}
</style>
